<div class="layui-fluid" style="background-color:#fff;">
    <form class="layui-form" action="javascript:;" style="padding-top: 10px;">
        <div class="layui-form-item">
            <label class="layui-form-label layui-hide" style="width: 80px;">登录系统</label>
            <div class="layui-input-inline layui-hide">
                <input type="text" name="account" value="sjzc" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline layui-hide">
                <input type="password" name="pwd" value="000000" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
<!--                <button type="submit" class="layui-btn layui-btn-sm layui-btn-warm" style="margin-top: 4px;" lay-submit lay-filter="login">登录</button>-->
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" style="margin-top: 4px;" lay-submit lay-filter="deviceList">获取设备</button>
                <button type="button" class="layui-btn layui-btn-sm" style="margin-top: 4px;" lay-submit lay-filter="logout">获取视频流</button>
            </div>
        </div>
    </form>
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm3 layui-col-md3">
            <div class="tree" id="deviceList"></div>
        </div>
        <div class="layui-col-xs12 layui-col-sm9 layui-col-md9">
           <div class="channelList">
<!--               <h2>信道：</h2>-->
<!--               <ul>-->
<!--                   <li class="active">通道1</li>-->
<!--                   <li>通道2</li>-->
<!--                   <li>通道3</li>-->
<!--               </ul>-->
<!--               <hr>-->
               <div class="player">
                   <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="580" height="320"  data-setup="{}">
                       <p class="vjs-no-js">
                           To view this video please enable JavaScript, and consider upgrading to a
                           web browser that
                           <a href="https://videojs.com/html5-video-support/" target="_blank">
                               supports HTML5 video
                           </a>
                       </p>
                   </video>
               </div>
           </div>
        </div>
    </div>
</div>
<style>
    .tree{
        width: 100%;
        min-width: 220px;
        height: calc(100vh - 65px);
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid #ececec;
    }
    .channelList{
        width: 100%;
        height: calc(100vh - 65px);
        overflow: hidden;
        border: 1px solid #ececec;
        border-left: 0;
        padding-left:4px;
    }
    .channelList h2{
        margin: 10px;
        float: left;
    }
    .channelList ul{
        margin-top: 10px;
        float: left;
        list-style-type: none;
    }
    .channelList ul li {
        float: left;
        padding: 5px;
    }
    .channelList ul li.active{
        background-color: dodgerblue;
        color: #ffffff;
        border-radius: 6px;
    }
    .player{

    }
</style>
